<template>
	<view class="mycustom-page">
		<hs-status-bar></hs-status-bar>
		<top-bar :title="'我的定制'" :haveBack="false"></top-bar>
		<view class="tabs">
			<u-tabs :current="current" lineWidth="0" lineHeight="0" :itemStyle="{width:'33.3%'}"
				:inactiveStyle="{ color: '#807D7E', fontSize: '38rpx' }" :activeStyle="{
					color: '#3C4242',
					fontSize: '38rpx',
					fontWeight: '700',
		}" :list="tabsList" @change="switchTabs">
			</u-tabs>
		</view>
		<scroll-view scroll-y="true" class="scroll-box" refresher-enabled :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
			@scrolltolower="scrolltolower">
			<view class="custom">
				<view class="custom-item" v-for="(item,index) of customList" :key="item.id" @click="toView(item)">
					<image :src="item.imageUrl" lazy-load :mode="item.type==1?'aspectFill':'aspectFit'" class="img"
						:class="{img2:item.type == 2}">
					</image>
					<view :class="{wait:item.status==0||item.status==1,err:item.status==2}"
						v-if="item.status==0||item.status==1||item.status==2">
						<image src="@/static/images/icon/wait.png" mode="aspectFit"
							v-if="item.status==0||item.status==1"></image>
						<text v-if="item.status==2">处理失败，请重新上传图片</text>
					</view>
					<view class="resolut" :class="{resolut2:item.type == 2}">
						{{statusOptions[item.status] || ''}}
					</view>
					<!-- v-if="item.status==3" -->
					<view class="delete" @click.stop="deleteCustom(item.id,index,item.type)">
						×
					</view>
				</view>
			</view>
			<view class="hs-p-b-20" v-if="!isEmpty">
				<u-loadmore :status="status" />
			</view>
			<u-empty v-if="isEmpty" mode="data" text="暂无数据" icon="/static/images/icon/data.jpg">
			</u-empty>
		</scroll-view>
		<custom-image-view :imageData="imageData" ref="customImageView"></custom-image-view>
	</view>
</template>

<script>
	import {
		getMyCustomList,
		deleteCustom
	} from '@/api/custom.js';
	import WebSocket from "@/utils/websocket4.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				customList: [],
				imageList: [],
				pageSize: 10,
				statusOptions: {
					0: '等待中…',
					1: '生成中…',
					2: '生成失败',
					3: '已完成',
				},
				client: null,
				triggered: false,
				isEmpty: false,
				status: "loading",
				noFresh: false,
				imageShow: false,
				imageData: {},
				tabsList: [{
						name: "全部",
						index: 0,
						type: '',
					},
					{
						name: "手机壳",
						index: 1,
					},
					{
						name: "图片",
						index: 2,
					},
				],
				current: 0,
			}
		},
		computed: {
			...mapGetters(['phoneModelId', 'messages']),
		},
		watch: {
			messages(newValue, oldValue) {
				let list = [newValue.customImage, newValue.customPhoneCase]
				list.forEach(item => {
					let index = this.customList.findIndex((i) => {
						return item.id == i.id
					})
					if (index != -1) {
						if (item.imageUrl != '') {
							this.customList[index].imageUrl = item.imageUrl
						}
						this.customList[index].status = item.status
					}
				})
			}
		},
		methods: {
			switchTabs(e) {
				this.current = e.index
				this.onRefresh()
			},
			toView(data) {
				// if (data.status != 3) {
				// 	return
				// }
				if (data.type == 1) {
					uni.setStorageSync('customViewImageUrl', data.imageUrl)
					uni.navigateTo({
						url: `/pages/myCustom/customView?id=${data.id}`
					})
				} else {
					this.imageData = data
					this.$refs.customImageView.ontoggle()
				}

			},
			// 我的定制列表
			getMyCustomList(lastId) {
				getMyCustomList({
					lastId,
					type: this.current == 0 ? '' : this.current,
					pageSize: this.pageSize
				}).then(res => {
					this.customList = !lastId ? res.data : this.customList.concat(res.data)
					if (this.customList.length == 0) {
						this.isEmpty = true
						this.status = "nomore";
					} else if (res.data.length < 10) {
						this.status = "nomore";
						this.isEmpty = false
					} else {
						this.status = "loadmore";
						this.isEmpty = false
					}
					this.triggered = false;
				})
			},
			// 下拉刷新
			onRefresh() {
				if (this.triggered) return
				this.triggered = true;
				setTimeout(() => {
					this.getMyCustomList()
				}, 500)
			},
			// 复位
			onRestore() {
				this.triggered = false;
			},
			// 滑动到底部
			scrolltolower() {
				// if (this.customList.length < this.pageSize) return
				this.getMyCustomList(this.customList[this.customList.length - 1].id)
			},
			// 删除定制图片
			deleteCustom(id, index, type) {
				const _this = this
				uni.showModal({
					content: '确认要删除',
					success: function(res) {
						if (res.confirm) {
							deleteCustom({
								id
							}).then(res => {
								const index1 = _this.customList.findIndex(item => {
									return item.id == id
								})
								if (index1 != -1) {
									_this.customList.splice(index1, 1)
								}

							})

						}
					}
				});
			},
		},
		onShow() {
			uni.hideTabBarRedDot({
				index: 1
			})
			uni.$u.debounce(() => {
				this.onRefresh()
			})

		},
		onLoad() {
			this.getMyCustomList()
		},
		onUnload() {},
		onShareAppMessage(){
			return {
				title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
				path: `/pages/index/index`,
			}
		}

	}
</script>

<style lang="scss">
	.mycustom-page {
		display: flex;
		flex-direction: column;
		height: 100%;

		.tabs {
			padding: 17rpx;
			background-color: #fff;
		}

		.scroll-box {
			flex: 1;
			overflow: hidden;

			.custom {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin: 30rpx 14rpx;

				.custom-item {
					width: 350rpx;
					height: 670rpx;
					border-radius: 21rpx;
					overflow: hidden;
					background-color: #fff;
					margin-bottom: 33rpx;
					position: relative;

					.img {
						height: 620rpx;
						width: 350rpx;
					}

					.img2 {
						height: 455rpx;
						width: 455rpx;
						position: relative;
						left: -52.5rpx;
						top: 100rpx;
					}

					.resolut2 {
						position: absolute;
						bottom: 6rpx;
						left: 50%;
						transform: translateX(-50%);
						line-height: 40rpx;
					}

					.resolut {
						font-size: 28rpx;
						text-align: center;
						line-height: 40rpx;
					}

					.wait {
						height: 620rpx;
						width: 350rpx;
						position: absolute;
						top: 0;
						left: 0;
						background-color: #000000b5;
						line-height: 620rpx;
						text-align: center;

						image {
							height: 52.5rpx;
							width: 52.5rpx;
						}
					}

					.err {
						height: 620rpx;
						width: 350rpx;
						position: absolute;
						top: 0;
						left: 0;
						background-color: #000000b5;
						line-height: 620rpx;
						text-align: center;

						text {
							color: #FF0000;
							font-weight: 700;
						}
					}

					.delete {
						height: 43rpx;
						width: 43rpx;
						background: #333333;
						color: #fff;
						font-size: 43rpx;
						position: absolute;
						top: 17rpx;
						right: 17rpx;
						text-align: center;
						line-height: 43rpx;
						border-radius: 50%;
						opacity: 0.8;
					}
				}
			}
		}
	}
</style>